import Taro, { Component } from '@tarojs/taro'
import { View, Image, Text } from '@tarojs/components'
import { AtList, AtListItem } from "taro-ui"
import styles from './index.module.less'
import Footer from '../../components/Footer'
import { TabBar, TabBarItem } from '../../components/TabBar'


const list = [
    {
        id: '111', title: '购物车', thumb: 'https://img.yzcdn.cn/public_files/2019/02/11/32797a1cb932093cc5ad9301a1ed2493.png'
    },
    {
        id: '222', title: '任务中心', thumb: 'https://img.yzcdn.cn/public_files/2019/03/19/f9c1b3cb9e4f7ec7909e180ae2efbb6c.png'
    },
    {
        id: '333', title: '返现', thumb: 'https://img.yzcdn.cn/public_files/2019/02/11/76b2b4d6e16887bb8cdb42b5e97eaded.png'
    },
    {
        id: '444', title: '赠品', thumb: 'https://img.yzcdn.cn/public_files/2019/02/11/fba880e26352425d9819c0d7be1693ef.png'
    },
    {
        id: '555', title: '课程', thumb: 'https://img.yzcdn.cn/public_files/2019/02/11/21b0d3f9656d61c4ac292c801382e71d.png'
    },
]

const list2 = [
    {
        id: '111', title: '收货地址', thumb: 'https://img.yzcdn.cn/public_files/2019/02/11/62fd9f26f0db12999419960a914cd32c.png'
    },
    {
        id: '222', title: '账号与安全', thumb: 'https://img.yzcdn.cn/public_files/2019/02/11/d12a725fd93576ac0e51294f13df52f5.png'
    },
    {
        id: '333', title: '个人信息', thumb: 'https://img.yzcdn.cn/public_files/2019/03/19/77b91dd266a2b452dc18a192ee709f0d.png'
    },
]

const bankInfo = [
    { id: '111', name: 'points ', title: '积分', value: 9 },
    { id: '222', name: 'privilege ', title: '优惠劵/码', value: 9 },
    { id: '333', name: 'card ', title: '卡', value: 9 },
    { id: '444', name: 'balance ', title: '余额', value: 0.99 },
]

const orderInfo = [
    { id: '111', title: '待付款', icon: 'https://b.yzcdn.cn/public_files/2019/04/28/1be3ce61d72286c7ac6e56fbb7d0735c.svg' },
    { id: '222', title: '代发货', icon: 'https://b.yzcdn.cn/public_files/2019/04/28/72cc80f8b65eae45862cafe0d27e78f7.svg' },
    { id: '333', title: '待收货', icon: 'https://b.yzcdn.cn/public_files/2019/04/28/d729a66ef2fe52dd47ae6998921b43fe.svg' },
    { id: '444', title: '评价', icon: 'https://b.yzcdn.cn/public_files/2019/04/28/a4a60cccd63f9d3ff476cb22f51146d7.svg' },
    { id: '555', title: '退款/售后', icon: 'https://b.yzcdn.cn/public_files/2019/04/28/15ed25836631717b7ff77266a1795328.svg' },
]


export default class extends Component {
    constructor(props) {
        super(props)
    }

    render() {

        return (
            <View className={styles.page}>
                <View className={styles.userInfoWrapper}>
                    <View className={styles.userInfo}>
                        <View className={styles.userInfoAvatar}>
                            <Image className={styles.avatarPic} src='https://img.yzcdn.cn/upload_files/avatar.png' ></Image>
                        </View>
                        <View className={styles.userInfoUserInfo}>
                            <View className={styles.userInfoUsername} >
                                199****2922
                            </View>
                            <View className={styles.userInfoUserGrowth}>
                                成长值0
                            </View>
                        </View>
                        <View className={styles.userInfoLevelWrapper}>
                            <View className={styles.userInfoLevel1}>
                                <Text className={styles.name}>悦蒙氏</Text>
                                <View className={styles.level}>
                                    <Text>成为会员</Text>
                                </View>
                            </View>
                        </View>
                    </View>
                </View>
                <TabBar>
                    {bankInfo.map(item => <TabBarItem key={item.id} {...item} />)}
                </TabBar>
                <AtList className={styles.TabHeader} hasBorder={false}>
                        <AtListItem  title='我的订单' extraText='查看全部订单' arrow='right' />
                </AtList>
                <TabBar className={styles.tabBar}>
                    {orderInfo.map(item => <TabBarItem key={item.id} {...item} />)}
                </TabBar>
                <AtList className={styles.AtList}>
                    {
                        list.map(item => <AtListItem key={item.id} {...item} arrow='right' />)
                    }
                </AtList>

                <AtList className={styles.AtList}>
                    {
                        list2.map(item => <AtListItem key={item.id} {...item} arrow='right' />)
                    }
                </AtList>
                <Footer />
            </View >
        )
    }
}
